﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   
<head>
 
<title>EGP project overlayed on Bing Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.resultsDiv {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity:0.7;	
	padding:8px; z-index:100;border:solid 1px black; background-color:#b0b0d0; font-size:0.75em;
}
</style>

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

<script type="text/javascript">

    var map = null;      
	var layer;
	var layerID = "egislid";

    function GetMap()
    {
        map = new VEMap('myMap');
	    map.LoadMap();         
        CreateLayer();
		map.SetCenterAndZoom(new VELatLong(-37.8, 144.95), 12);
    }

    var HandlerURL = "EGPExampleMapHandler.ashx";

	function GetEGISTile(context,obj)
	{
		var x = context.XPos;
		var y = context.YPos;
		var z = context.ZoomLevel;
        var s = HandlerURL + "?tx="+x+"&ty="+y+"&zoom="+z+"&mapid=none" + "&version=6.6";
        return s;		
	}
	
	function MouseHandler(e)
	{
	    var msg="";
	    if (e.eventName == "onclick") 
	    {
	        if (e.leftMouseButton)
	        {
	            msg = "Sending Request...<br/>";
	            var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));  
                msg += "" + loc.Latitude + "," + loc.Longitude +"<br/>";
                
                RequestShapeInfo(HandlerURL,loc.Longitude, loc.Latitude, map.GetZoomLevel(),"");
            }   
        }
        document.getElementById('resultDiv').innerHTML=msg;
        
        
    }      
    
    function GetXmlHttpObject()
    {    
        var xmlHttp=null;
        try
        {
          // Firefox, Opera 8.0+, Safari
          xmlHttp=new XMLHttpRequest();
        }
        catch (e)
        {
          // Internet Explorer
          try
          {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch (e)
          {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        }
        return xmlHttp;
    }

function AjaxStateChanged(AjaxObj)
 {    
    if(AjaxObj == null) return;
    
    if(AjaxObj.readyState==4)
    {
    
        var msg;
        var lines = AjaxObj.responseText.split('\n');
        //first line is 'true' or 'false' if a shape was located
        if(lines[0] == 'true')
        {
            //second line is the lat/long point of the request returned
            //var point = lines[1].split(',');
            //var x = 1.0 * point[0];
            //var y = 1.0 * point[1];            
            //3rd line is the text to display
            msg = lines[2];            
        }
        else
        {
            msg = "No record data";
        }
        document.getElementById('resultDiv').innerHTML=msg;
        
    }          
 }


    
    function RequestShapeInfo(handlerUrl, px, py, zoom, mapId) 
    {
        var AjaxObj = GetXmlHttpObject();
        if (AjaxObj==null)
        {
            alert ("Your browser does not support AJAX!");
            return;
        }
        var url=handlerUrl + "?getshape=true&x=" + px + "&y=" + py + "&zoom=" + zoom + "&mapid=" +  encodeURIComponent(mapId)
        
        AjaxObj.onreadystatechange=function()
        {
            AjaxStateChanged(AjaxObj)
        }
        AjaxObj.open("GET",url,true);
        AjaxObj.send(null);
    }

 
 	
      
    function CreateLayer()
    {         
		layer = new VEShapeLayer();
	    map.AddShapeLayer(layer);
		var bounds = [new VELatLongRectangle(new VELatLong(80,-180),new VELatLong(-39,150))];
        var tileSource = "1";
        var tileSourceSpec = new VETileSourceSpecification(layerID, tileSource, 1, bounds, 8,18,GetEGISTile,0.5,100);
        tileSourceSpec.NumServers = 1;
        tileSourceSpec.Bounds     = bounds;
        tileSourceSpec.Opacity    = 0.65;
        tileSourceSpec.ZIndex     = 100;
        map.AddTileLayer(tileSourceSpec, true);        
        map.AttachEvent("onclick",MouseHandler);
	}

    
    
</script>

</head>

<body onload="GetMap();">
<div>
<p>This example demonstrates loading a shapefile layer in Bing Maps and requesting shape attributes using AJAX.
<br />To view shape attributes zoom in and click on a main road to view the record attributes</p>
<br />
</div>
<div id='myMap' style="position:absolute; width:800px; height:450px; top:70px"></div>
<div id='resultDiv' class="resultsDiv" style="position:absolute;left:480px;top:75px;width:300px;">Click shape on map map to view layer properties.</div>

</body>

</html>
      